<div class="row">
  <div class="col-xs-12 col-12 col-sm-3 col-md-3 col-lg-2 form-group">
    <select
      class="custom-select form-control "
      [(ngModel)]="locale" (ngModelChange)="applyLocale(dp);">
      <option *ngFor="let loc of locales" [value]="loc">{{ loc }}</option>
    </select>
  </div>
  <div class="col-xs-12 col-12 col-sm-5 col-md-6 col-lg-4 form-group">
    <input placeholder="Datepicker" type="text" class="form-control" bsDatepicker #dp="bsDatepicker">
  </div>
  <div class="col-xs-12 col-12 col-sm-4 col-md-12 col-lg-4 form-group">
    <input type="button"
           class="btn btn-success"
           value="Date Picker"
           (click)="dp.show()" />
  </div>
</div>
<br>

<div class="row">
  <div class="col-xs-12 col-12 col-sm-3 col-md-3 col-lg-2 form-group">
    <select
      class="custom-select form-control "
      [(ngModel)]="locale" (ngModelChange)="applyLocale(dpr);">
      <option *ngFor="let loc of locales" [value]="loc">{{ loc }}</option>
    </select>
  </div>
  <div class="col-xs-12 col-12 col-sm-5 col-md-6 col-lg-4 form-group">
    <input placeholder="Daterangepicker" type="text" class="form-control" bsDaterangepicker #dpr="bsDaterangepicker">
  </div>
  <div class="col-xs-12 col-12 col-sm-4 col-md-12 col-lg-4 form-group">
    <input type="button"
           class="btn btn-success"
           value="Date Range Picker" (click)="dpr.show()"/>
  </div>
</div>

